<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="__INDEX__/css/mui.min.css" rel="stylesheet" />
		<link href="__INDEX__/css/Phoebe.css" rel="stylesheet" />
		<link href="__INDEX__/css/all.css" rel="stylesheet" />
		<title>新增银行卡</title>
		<style>
			.extract {
				padding: 0 3.5%;
				background: #fff;
				padding-bottom: 30px;
				padding-top: 15px;
			}
			
			.extract>form>p {
				overflow: hidden;
				text-align: right;
			}
			
			.extract>form>p>span {
				float: left;
				width: 25%;
				line-height: 40px;
			}
			
			.extract>form>p>input {
				float: left;
				width: 75%;
				/*margin-bottom: 0px;*/
				background: #Fff;
			}
			
			.extract>form>input {
				width: 100%;
				margin-top: 20px;
			}
			
			.extract>form>p:last-child {
				text-align: center;
				font-size: 12px;
				line-height: 25px;
			}
			
			.mima-model {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, 0.8);
				display: none;
			}
			
			.mima-model>div {
				width: 80%;
				margin: 0 auto;
				margin-top: 150px;
				background: #fff;
				border-radius: 5px;
			}
			
			.mima-model>div {
				padding-bottom: 20px;
			}
			
			.mima-model>div>h2 {
				position: relative;
				line-height: 45px;
				background: #007aff;
				color: #fff;
				text-align: center;
				font-size: 16px;
				height: 45px;
				border-radius: 5px 5px 0 0;
			}
			
			.mima-model>div>h2>span {
				font-size: 12px;
				position: absolute;
				right: 5px;
			}
			
			.mima-model>div>p {
				width: 90%;
				line-height: 40px;
				margin: 0 auto;
				margin-top: 25px;
			}
			
			.mima-model>div>p>input {
				margin-bottom: 0px;
			}
			
			.mima-model>div>button {
				width: 90%;
				margin-left: 5%;
				margin-top: 20px;
				background: #007aff;
				color: #fff;
				text-align: center;
				font-size: 16px;
				height: 40px;
			}
			
			.mima-model>div>p>span {
				color: #e4393c;
			}
			
			.xp {
				margin-top: 10px !important;
			}
		</style>
	</head>

	<body style="margin-top: 45px;">
		<header class="mui-bar mui-bar-nav">
			<a href="javascript:history.back(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">银行卡管理</h1>
		</header>
		<!--新增银行卡-->
		<div class="extract">
			<form id='my_form' action="" method="post" class="class="layui-form"">
				<div class="layui-form-item">
				    <label class="layui-form-label" style="width: 30%;text-align: left;">真实姓名:</label>
				      <input type="text" name="real_name" value="{$user_info['real_name']}" required  lay-verify="required" placeholder="请输入真实姓名" autocomplete="off" style="width: 69%;" class="layui-input">
			  	</div>
			  	<div class="layui-form-item">
				    <label class="layui-form-label" style="width: 30%;text-align: left;">身份证号:</label>
				      <input type="text" name="idcard" id="idcard" value="{$user_info['idcard']}" required  lay-verify="required" placeholder="请输入身份证号" autocomplete="off" style="width: 69%;" class="layui-input">
			  	</div>
			  	<div class="layui-form-item">
				    <label class="layui-form-label" style="width: 30%;text-align: left;">开户银行:</label>
				      <input type="text" name="bank_name" id="bank_name" value="{$user_info['bank_name']}" required  lay-verify="required" placeholder="请输入开户银行" autocomplete="off" style="width: 69%;" class="layui-input">
			  	</div>
			  	<div class="layui-form-item">
				    <label class="layui-form-label" style="width:30%;text-align: left;">银行卡号:</label>
				      <input type="text" name="bank_no" id="bank_no" value="{$user_info['bank_no']}" required  lay-verify="required" placeholder="请输入银行卡号" autocomplete="off" style="width: 69%;" class="layui-input">
			  	</div>
			  	<div class="layui-form-item">
				   
				    	<label  style="width: 30%;float: left;text-align: left;">银行绑定手机号:</label>
				      <input type="text" id='bank_tel' value="{$user_info['bank_tel']}" name="bank_tel" required  lay-verify="required" placeholder="请输入银行卡绑定手机号码" autocomplete="off" style="width: 69%;float: left;"
				      	 class="layui-input">
			  	</div>
				<input type="button" class="layui-btn" lay-submit lay-filter="submit_from" style="background-color: #007aff;color: white" id="baocun" value="确认保存" />
			</form>
		</div>
	</body>
</html>
{include file="public/footer" /}

<script>
	//提交表单
	function set_content(){
		var idcard=$("#idcard").val();
		var bank_name=$("#bank_name").val();
		var card_no=$("#bank_no").val();
		if(idcard==""||bank_name==""||card_no==""){
			layer.msg('请填写正确的账号信息');
			return;
		}
		var reg = /^1[3|4|5|7|8][0-9]{9}$/; //验证规则
		if(!reg.test($('#bank_tel').val())) {
			layer.msg('手机号码格式不正确');
			return;
		}
		
  		 $.ajax({
             	type:"post",
                url:"{:url('index/member/add_bankc')}",
                data: $('#my_form').serialize(),//表单数据
                success:function(data){
                   layer.msg(data.msg);
                },error:function(data){
                	var a = data;
                }
        });
  		
  	}
	//图片上传
	layui.use(['form'], function(){
  		var $ = layui.jquery,form = layui.form;
  		
	  	//监听提交
		form.on('submit(submit_from)', function(data){
			set_content();
			
		    return false;
		});
	})
</script>
